<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <%
        String basePath = request.getScheme()
                + "://"
                + request.getServerName()
                + ":"
                + request.getServerPort()
                + request.getContextPath()
                + "/";
        pageContext.setAttribute("basePath",basePath);
    %>

    <!--写base标签，永远固定相对路径跳转的结果-->
    <base href="<%=basePath%>">
    <!-- 导入样式 -->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <!-- 导入 jquery -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="static/css/layui.css" media="all">
    <link rel="stylesheet" href="css/admin.css" media="all">
    <link rel="stylesheet" href="static/css/login.css" media="all">

</head>
<body layadmin-themealias="default">
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>注 册</h2>
            <p> </p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">

            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-tree" for="LAY-user-login-tree"></label>
                <input type="text" name="employeeId" id="LAY-user-login-tree" lay-verify="nickname" placeholder="用户名" class="layui-input">
            </div>

            <%--            <div class="layui-form-item">--%>
            <%--                <div class="layui-input-inline" id="LAY-user-login-nickname" style="width: 100%;">--%>
            <%--                    <select name="employeeNames" id="employeeNames" lay-filter="select-employeeNames"> <!--lay-verify="required"-->--%>
            <%--                        <option value="">请选择职员</option>--%>
            <%--                    </select>--%>
            <%--                </div>--%>
            <%--                <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-nickname"></label>--%>
            <%--            </div>--%>
            <!--<div class="layui-form-item">
                 <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-nickname"></label>
                 <input type="text" name="uname" id="LAY-user-login-nickname" lay-verify="nickname" placeholder="昵称" class="layui-input">
             </div>-->
            <!--<div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
                    <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="验证码" class="layui-input">
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="LAY-user-getsmscode">获取验证码</button>
                    </div>
                </div>
                </div>
            </div>-->
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                <input type="password" name="password" id="LAY-user-login-password"  placeholder="密码" class="layui-input"><!--lay-verify="pass"-->
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-repass"></label>
                <input type="password" name="repass" id="LAY-user-login-repass" placeholder="确认密码" class="layui-input"><!--lay-verify="required"-->
            </div>

            <!--<div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone" for="LAY-user-login-cellphone"></label>
                <input type="text" name="cellphone" id="LAY-user-login-cellphone" lay-verify="" placeholder="手机" class="layui-input">
            </div>-->
            <%--            <div class="layui-form-item">--%>
            <%--                <div class="layui-input-inline" id="LAY-user-login-auz" style="width: 100%;">--%>
            <%--                    <select name="juris"  id="juris"> <!--lay-verify="required"-->--%>
            <%--                        <option value="user">普通职员</option>--%>
            <%--                        <option value="amdin">管理员</option>--%>
            <%--                        <option value="root">超级管理员</option>--%>
            <%--                    </select>--%>
            <%--                </div>--%>
            <%--                <label class="layadmin-user-login-icon layui-icon layui-icon-auz" for="LAY-user-login-auz"></label>--%>
            <%--            </div>--%>


            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
                        <input type="text" name="vercode" id="LAY-user-login-vercode"  placeholder="图形验证码" class="layui-input"> <!--lay-verify="required"-->
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;height: 37px;text-align: center; line-height:35px; border: 1px solid black" id="yzm">
                            <a href="javascript:void(0)" style="display: block;height: 35px;text-align: center; line-height:35px;" id="valuesYZM"></a>
                            <!--<img src="captcha" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">-->
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="layui-form-item">
                 <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-nickname"></label>
                 <input type="text" name="nickname" id="LAY-user-login-nickname" lay-verify="nickname" placeholder="昵称" class="layui-input">
             </div>-->
            <div class="layui-form-item">
                <input type="checkbox" name="agreement" lay-skin="primary"  title="同意用户协议" checked>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-reg-submit">注 册</button>
            </div>
            <div class="layui-trans layui-form-item layadmin-user-login-other">
                <label>社交账号注册</label>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>

                <a href="page/user/login2.jsp" class="layadmin-user-jump-change layadmin-link layui-hide-xs">用已有帐号登入</a>
                <a href="login.html" class="layadmin-user-jump-change layadmin-link layui-hide-sm layui-show-xs-inline-block">登入</a>
            </div>
        </div>

    </div>
</div>

<script src="layer.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    //验证码
    function createCode($){
        code = '';//首先默认code为空字符串
        var codeLength = 4;//设置长度，这里看需求，我这里设置了4
        //设置随机字符
        var random = new Array(0,'a',1,'b',2,'c',3,'d',4,'e',5,'f',6,'g',7,'h',8,'i',9,'j','A','k','B','l','C','m','D','n','E','o','F','p','G','v','q','H','r','I','z','J','K','s','u','L','M','t','N','O','P','Q','R','y','S','T','U','V','W','w','X','Y','x','Z');
        for(var i = 0; i < codeLength; i++){ //循环codeLength 我设置的4就是循环4次
            var index = Math.floor(Math.random()*36); //设置随机数范围,这设置为0 ~ 36
            code += random[index]; //字符串拼接 将每次随机的字符 进行拼接
            code+=" ";
        }
        $("#valuesYZM").text(code);//将拼接好的字符串赋值给展示的Value
    }
    layui.use(['jquery','layer','form'],function (){
        var $=layui.jquery;
        var form=layui.form;
        var layer=layui.layer;
        //加载下拉框
        $.post("/Logistic/selectEmployeeName",function(data){
            /*$.each(data,function (index, item) {
                $('#abcd').append(new Option(item.employeeName, item.employeeId));// 下拉菜单里添加元素
            });*/
            for(var i=0;i<data.length;i++){
                $('#employeeNames').append(new Option(data[i].employeeName,data[i].employeeId));// 下拉菜单里添加元素
            }
            layui.form.render("select");//刷新select选择框渲染
        },"json")
        createCode($);
        //验证码Div加载点击事件
        $("#yzm").bind('click',function() {
            createCode($);
            return false;
        });
        form.on('select(select-employeeNames)',function(data){
            var values=data.value;
            $("input[name='employeeId']").val(values);
        })
        form.on('submit(LAY-user-reg-submit)', function(obj){
            //console.log(data);
            var field = obj.field;
            //var pattern = /^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/;
            var valueYZM=$("#valuesYZM").text().replace(/\s+/g,"").toLowerCase();
            if(field.employeeNames==""){
                layer.msg('请选择呢称!',{icon:5,time:1000,anim:6},function(){
                    return false;
                });
            }else if(field.password==""){
                layer.msg('密码不能为空',{icon:5,time:1000,anim:6},function(){
                    $("input[name='password']").focus();
                    return false;
                });
                return false;
            }else if(field.password.length<6 || field.password.length>18){
                layer.msg('密码长度不能小于6位,并且不能打于18位',{icon:5,time:1000,anim:6},function(){
                    $("input[name='password']").focus();
                    return false;
                });
            }else if(!/^[a-z0-9]+$/ig.test(field.password)){
                layer.msg('密码不能包含空格和特殊字符',{icon:5,time:1000,anim:6},function(){
                    $("input[name='password']").focus();
                    return false;
                });
            }else if(field.repass!=field.password){
                layer.msg('两次密码不一致',{icon:5,time:1000,anim:6},function(){
                    $("input[name='repass']").focus();
                    return false;
                });
            }else if(field.vercode==""){
                layer.msg('验证码不能为空!',{icon:5,time:1000,anim:6},function(){
                    $("input[name='vercode']").focus();
                    createCode($);
                    return false;
                });
            }else if(field.vercode.toLowerCase()!=valueYZM){
                layer.msg('验证码不正确!',{icon:5,time:1000,anim:6},function(){
                    $("input[name='vercode']").focus();
                    createCode($);
                    return false;
                });
            }else if(!field.agreement){
                layer.msg('你必须同意用户协议才能注册');
                return false;
            }else{
                var obj={
                    // loginName:$("#employeeNames option:checked").text(),
                    password:field.repass,
                    // loginPower:field.juris,
                    username:field.employeeId,
                    rePassword:field.password
                }
                $.post('userServlet?action=register',obj,function(res){
                    if(res=="true"){
                        layer.msg("注册成功",{icon:1,offset:'15px',time: 2000},function(){
                            location.href = 'page/user/login2.jsp'; //跳转到登入页
                        });
                    }else{
                        layer.msg(res,{icon:2,offset:'15px',time: 1000},function(){
                            createCode($);
                        });
                    }
                })
            }
            return false;
        });
    })
</script>
</body>
</html>